<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>获取节点</title>
	</head>

	<body>
		<ul id="myUL">
			<li>春</li>
			<li>夏</li>
			<li>秋</li>
			<li>东</li>
		</ul>
		<script type="text/javascript">
			/*1、获取当前节点ul
						  2、 查看当前节点的第一个子节点
						  3、查看当前节点的最后一个节点
						  4、查看当前节点的名称
						  5、查看当前节点的所有子节点
						 */
			var ul = document.getElementById('myUL');
			//有9个子节点：文本节点，li节点
			//其中文本节点：就是标签前后的空白 换行符
			console.log("ul的第一个子节点是：" + ul.childNodes);

			console.log("ul的第一个子节点是：" + ul.firstChild);
			console.log("ul的最后一个节点：" + ul.lastChild);

			//创建节点，增加、删除
			//创建节点：标签名称
			var h1 = document.createElement('h1');
			h1.innerHTML='一年四季';
			//把h1节点增加到页面
			ul.appendChild(h1);
			//删除节点：删除“冬”
			//获取ul的最后一个子节点，然后删除
			ul.lastElementChild.remove();
		</script>

	</body>

</html>